import React, {
  Component,
  createRef,
  createContext,
  useRef,
  useState,
  useEffect,forwardRef 
} from "react";
import PropType from "prop-types";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap"; //动画库
import Stats from "stats.js"; //性能监控
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js"; // FBX 模型加载器

import { useWindosScroll } from "./utlis";

class Text extends React.Component{
  handleClick =(v:any)=>{
    console.log('1231123',v)
  }
  state={  
    name:'123123'
  }
  render(){
    return(<h1  onClick={()=>this.handleClick(1)}>类组件才是有 ref </h1>)
  }
 }
const ReactDemo = () => {
  // useState 说明：
  // 1.首次渲染（组件调用就渲染一次，渲染的值就是初始值。也就是这个0 只会出现一次） 。 2.更新渲染。通过setCount 修改 count 的值整个函数组件会渲染一次
  const [count, setCount] = useState(0);
  console.log(count);

  //  useEffect 说明：
  // 1、只有第一个参数（函数）时，每次都会跟随组件的值更新而触发
  // 2、第二个参数传入[]空数组时，只会触发一次，首次组件运行的时候
  // 3、数组中传入依赖值的时候，依赖值发生改变也会触发 useEffect。可以把它理解为vue的watch。依赖的值必须使用，否则会有警告，产生不必要的麻烦
  // 4、hook函数组件 没有生命钩子这个概念。
  useEffect(() => {
    console.log("一直渲染", count);
  }, [count]);

  // useWindosScroll hook方法，获取滚动条到顶部的距离
  const h =useWindosScroll()

  // useRef 获取dom 实例 
  const threeDOM = useRef<any>(null);
  const threeDOM1 = useRef(null);

  useEffect(()=>{
    // 确保可以拿到dom
    // console.log(threeDOM.current,threeDOM)
    // threeDOM.current?.handleClick()
    if(threeDOM && threeDOM.current){
      console.log(threeDOM.current.handleClick(123))
    }
  
  },[])

  const inputRef = useRef<HTMLInputElement>(null);
  function handleClick() {
    setCount(count + 1)
    if(inputRef && inputRef.current){
      console.log(1)
      inputRef.current.focus();
    }
    if(threeDOM && threeDOM.current){
      console.log(threeDOM.current.handleClick(123))
    }
   
  }

  return (
    <div style={{height:'1000px'}}>
    
      <div id="id">xx{count}</div>
      <button onClick={()=>handleClick()}>{count}</button>
      <div>{h}</div>
      <input ref={inputRef} />
      <div >获取到实例</div>
      <Text ref={threeDOM} />

    
    </div>
  );
};

export default ReactDemo;
